<template>

<div class="filter-menu">
    <div class="wrap">
        <div  v-show ="sbrand !== ''" class="label">
        <div >
            {{sbrand}}
            <Icon type="ios-close" size="24" @click="selectBrand('')"/>
        </div>
        </div>
         <div  v-show ="srom !== ''" class="label">
            <div >
                {{srom}}
                <Icon type="ios-close" size="24" @click="selectRom('')"/>
            </div>
         </div>
         <div  v-show ="sos !== ''" class="label">
            <div >
                {{sos}}
                <Icon type="ios-close" size="24" @click="selectOs('')"/>
            </div>
        </div>

</div>
    
    <div v-show ="sbrand === ''" class="row">
        <div  class="left">品牌</div > 
        <div class="right"> 
            <div v-for="(item,index) in brand" :key="index" :item="item"  class="text" @click="selectBrand(item)" @on-change="selectBrand">{{item}}
                </div>
        </div> 
      
    </div>
    <div v-show ="srom === ''"class="row">
        <div  class="left">机身内存</div > 
        <div class="right"> 
            <div v-for="(item,index) in rom" :key="index" :item="item" class="text"  @click="selectRom(item)">{{item}}
                </div>
        </div> 
      
    </div>
    <div v-show ="sos === ''"class="row">
        <div  class="left">操作系统</div > 
        <div class="right"> 
            <div v-for="(item,index) in os" :key="index" :item="item"  class="text"  @click="selectOs(item)">{{item}}
                </div>
        </div> 
      
    </div>
</div>


</template>


<script>
import service from "@/service"
    export default{
        name:'filterMenu',
        data(){
            return{
                brand:[],
                rom:[],
                os:[],
                sbrand:'',
                srom:'',
                sos:''
            }

        },
        methods:{
            selectBrand(brand){
                console.log('==',brand)
                this.sbrand=brand
                this.$emit('on-filter',this.sbrand,this.srom,this.sos)
            },
            selectRom(rom){
                console.log('==',rom)
                this.srom=rom
                this.$emit('on-filter',this.sbrand,this.srom,this.sos)
            },
            selectOs(os){
                console.log('==',os)
                this.sos=os
                this.$emit('on-filter',this.sbrand,this.srom,this.sos)
            }
        },
        created(){
            service.get('/v1/home/filterMenu')
            .then((res)=>{
                console.log(res)
                this.brand=res.brand,
                this.rom=res.rom,
                this.os=res.os
            })
            }
    }
</script>


<style lang="scss" scoped>
.filter-menu{
    margin-top: 60px;
    margin-bottom: 60px;
}
.wrap{
    display: flex;
    .label{
    display: flex;
    background: rgb(48, 122, 233);
    padding: 5px 10px;
    border-radius:4px; 
}
}
.row{
    display: flex;
    border-bottom:1px solid #ddd;
.left{
    background-color:#FFD700;
    width:200px;
    height: 30px;
    line-height: 30px;
}
.right{
    display: flex;
    line-height: 30px;
    .text{
        margin: 0 10px;
        color: #005aa0;
        cursor:pointer;
    }

}
}


</style>
